@charset"utf-8";

//我编译后是不会被输出
/*我其实就是标准的CSS注释，会被编译输出*/

//变量定义:
@color_bg: #123456;
@background-color: #888;

body{
	color: @color_bg;  //使用变量
	background-color: @background-color;
}

//混合
.font_base{
	font-family: "microsoft yahei";
	font-size: 15px;
}

.cc1{
	.font_base;  //使用混合
	.font_base1();
	background-color: aqua;
}

//如果不想混合定义也被一起编译到css文件，可以在后面加上()
.font_base1(){
	border: solid #3e3e3e 5px;
}

//可带参数混合
.font_base2(@font_size, @color){
	font-family: "microsoft yahei";
	font-size: @font_size;
	color: @color;
}

.cc2{
	.font_base2(20px, #753951);  //使用带参数混合
	padding: 20px;
}

//混合，参数带默认值
.font_base3(@font_size: 30px, @color: #2f2f2f){
	font-family: "microsoft yahei";
	font-size: @font_size;
	color: @color;
}
.cc3{
	.font_base3(50px);
	background-color: antiquewhite;
	.border_radius();
}

//使用混合解决前缀问题
.border_radius(@radius: 5px){
	-webkit-border-radius: @radius;
	   -moz-border-radius: @radius;
	        border-radius: @radius;
}

//三角形
.sanjiao{
	width: 0;
	height: 0;
	border-width: 20px;
	border-color: red transparent transparent transparent;
	border-style: solid dashed dashed dashed;
}


//匹配模式

//@_ 通配符
//注意通配的参数必须和非通配符的保持一致，否则会编译错误
.targint(@_, @width: 10px, @color: #987654){
	display: inline-block;
	width: 0;
	height: 0;
	color: @color;
}
//匹配.targint(top...
.targint(top, @width: 20px, @color: #987654){
	border-width: @width;
	border-color: @color transparent transparent transparent;
	border-style: solid dashed dashed dashed;
}
//匹配.targint(bottom
.targint(bottom, @width: 30px, @color: #987654){
	border-width: @width;
	border-color: transparent transparent @color transparent;
	border-style: dashed dashed solid dashed;
}
//匹配.targint(left
.targint(left, @width: 40px, @color: #987654){
	border-width: @width;
	border-color: transparent transparent transparent @color;
	border-style: dashed dashed dashed solid;
}
//匹配.targint(right
.targint(right, @width: 50px, @color: #987654){
	border-width: @width;
	border-color: transparent @color transparent transparent;
	border-style: dashed solid dashed dashed;
}
.targint1{
	.targint(top);
}
.targint2{
	.targint(bottom);
}
.targint3{
	.targint(left);
}
.targint4{
	.targint(right);
}

//运算
@height: 100px;
.box1{
	height: @height + 100;  //不带单位(推荐)
	background-color: #3E3E3E;
}
.box2{
	height: @height + 100px;  //带单位(不推荐)
	background-color: bisque;
}
.box3{
	height: (@height + 100) * 6 / 3;  //复杂运算
	background-color: blue;
}

//嵌套规则
ul.ul01{
	width: 100px;
	margin: 0 auto;
	padding: 10px;
	background-color: #FFE4C4;
	font-size: 20px;
	
	li{
		height: 30px;
		line-height: 30px;
		color: #FF0000;
		
		a{
			font-size: 20px;
			color: #2F2F2F;
			
			//&代表上一层选择器
			&:hover{
				color: #FF0000;
			}
		}
		
		span{
			padding: 0 20px;
		}
	}
}

//@arguments返回所有参数，并以空格隔开，实际使用不多
.border(@width: 10px, @color: #bbb, @style: solid){
	border: @arguments;
}
.border{
	.border();
}
.border2{
	.border(30px, #333);  //依然可以修改默认值
}

//避免编译
//对要避免编译的字符串使用单引号或者双引号包裹起来，并在前面加上~
.test001{
	height: ~'calc(400px - 55px)';
	background-color: #753951;
}

//important
//不建议使用，可以在测试时使用
.box4{
	.box3 !important;
	background-color: red;
}

//import增强
//原生@import在编译后会被放置在文件开头
//注意导入文件路径是相对于生成的css文件的
@import "import_css_0.css";
//将原生的css文件内容作为les导进，此时文件路径是相对于当前less文件的
//会删除诸如@charset "utf-8";等不必要的代码
@import (less)"../css/import_css_0.css";
//导入less文件(可以不含后缀名)
@import "import_less_0";
//导入less文件(含后缀名)
//测试发现文件多次导入时仅生效一次
@import "import_less_0.less";

//只作为资源引入使用，不编译其中的内容
@import (reference) "import_less_1.less";

